﻿<?php

require_once "mapjs.php";

?>

<style type="text/css">
	html { height: 100% }
	body { height: 100%; margin: 0; padding: 0 }
	
	.dcell {
		margin: 10px;
		padding: 10px;
		
		border: solid 1px;
	}

	#mapcell {		
	}
	
	#outmapcell {
		display: inline;
		float: left;
	}

	#inforcell {
		display: inline;
		float: left;
	}
	
	#geocell {
	
	}
		
	#addrcell {
		
	}
	
	#map_canvas {
		width: 400px;
		height: 400px;
	}
	
</style>

<div id="mainmap">

	<div id="outmapcell">

		<div class="dcell" id="mapcell">
			<div id="map_canvas"></div>
		</div>
		
	</div>

	<div id="inforcell">

		<div class="dcell" id="geocell">
			<table>
				<tr>
					<td>
						<label for="lattxb">Latitude: </label>
					</td>
					<td>
						<input type="text" name="lattxb" id="lattxb"/>
					</td>
				</tr>
				<tr>
					<td>
						<label for="lngtxb">Longitude: </label>
					</td>
					<td>
						<input type="text" name="lngtxb" id="lngtxb"/>
					</td>
				</tr>
				<tr>
					<td></td>
					<td>
						<input type="button" value="Reset" onclick="focusOn(hcmCity)"/>
					</td>
				</tr>
				<tr>
					<td></td>
					<td>
						<input type="button" value="Focus to" 
						onclick="focusOn(new google.maps.LatLng(
						document.getElementById('lattxb').value,
						document.getElementById('lngtxb').value)
						)"
						/>
					</td>
				</tr>
			</table>
		</div>
		
		<div class="dcell" id="addrcell">
			<table>
				<tr>
					<td>
						<label for="addrtxt">Address: </label>
					</td>
					<td>
						<!--<input type="text" name="addrtxt" id="addrtxt"/>-->
						<textarea rows="2" cols="20" name="addrtxt" id="addrtxt">
						</textarea>
					</td>
				</tr>
				<tr>
					<td></td>
					<td>
						<input type="button" value="Find target" onclick="findTarget(addrTxt.value)"/>
					</td>
				</tr>
			</table>
		</div>

	</div>
	
</div>

<script language="javascript">

	initialize();

</script>